* {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    background: linear-gradient(#99f, #f99);
}

body,
.navbar,
.navbar ul {
    display: flex;
    justify-content: center;
    align-items: center;
}

.navbar {
    position: relative;
    padding: 20px;
    border-radius: 50px;
    background-color: #fff;

    input {
        width: 40px;
        height: 40px;
    }

    span {
        position: absolute;
        left: 25%;
        top: calc(50% - 10px);
        width: 40px;
        height: 4px;
        border-radius: 15px;
        background-color: #999;
        pointer-events: none;
        transition: 
        transform .4s ease-in-out .4s,
        left .4s ease-in-out,
        top .4s ease-in-out;
        &:nth-of-type(2) {
            top: calc(50% + 6px);
        }
    }

    ul {
        width: 0px;
        overflow: hidden;
        white-space: nowrap;//不换行

        transition: transform .4s ease-in-out .4s,
        width .4s ease-in-out;

        li {
            list-style: none;
            margin: 0 15px;

            a {
                text-decoration: none;
                font-size: 20px;
                font-weight: 700;
                color: #333;

                &:hover {
                    color: #fb7299;
                }
            }
        }
    }

    input {
        width: 40px;
        height: 40px;
        opacity: 0;
        cursor: pointer;

        &:checked {
            ~ul {
                width: 350px;
                transition: width .4s ease-in-out,
                transform .4s ease-in-out .4s;
            }

            ~span {
                left: 5%;
                transition: top .4s ease-in-out,
                left .4s ease-in-out,
                transform .4s ease-in-out .4s;
                &:nth-of-type(2) {
                    top: calc((50% - 2px));
                    transform: rotate(-45deg);
                    background-color: #fb7299;

                }

                &:nth-of-type(1) {
                    top: calc((50% - 2px));
                    transform: rotate(45deg);
                    background-color: #fb7299;
                    transition: top .4s ease-in-out,
                    left .4s ease-in-out,
                    transform .4s ease-in-out .4s;
                }
            }

        }
    }

}